<template>
<div class="pro-box" @click="goDetail(item.id)">
    <div class="pro-img-box">
      <img class="pro-img" :src="item.picUrl" alt="" />
    </div>
    <div class="text-box">
      <div class="name">{{ item.name }}</div>
      <div class="weight">{{ language.nav.weight }}: {{ item.sku?.weight }} G/M | {{ language.nav.width }}: {{ item.sku?.width || "-" }} CM</div>
      <div class="name mb10">
        <span v-if="item.volumePrice">{{ stroe.currency }} {{ roundFractional(item.volumePrice / 100, 2) }}/m</span>
        <span v-if="item.price && item.volumePrice"> ~ </span>
        <span v-if="item.price">{{ stroe.currency }} {{ roundFractional(item.price / 100, 2) }}/m</span>
      </div>
      <div class="weight">{{ item.moq || 1 }} (MOQ)</div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { commonStore } from "@/components/store";
import type { TGoodsItem } from "./type";
import { language } from "~/conf";

const stroe = commonStore();
defineProps<{
  item: TGoodsItem
}>()
// 去详情页面
const goDetail = (id: string) => {
  navigateTo({ path: `/prodetail/${id}` });
};

</script>
<style lang="stylus" scoped>
.pro-box{
    width: 245px;
    height:410px
    border: 1px solid #fff;
    margin-right 15px;
    margin-bottom 20px
    padding 6px
    box-sizing border-box
    transition all .3s
    cursor pointer
    .pro-img-box{
      width 230px;
      height 240px;
      display flex
      justify-content center
      align-items center
    }
    .pro-img{
      width 100%
    }
    .text-box{
      .name{
        height 38px
        font-weight: bold;
        overflow hidden
        font-size: 14px;
        margin-top 11px
        margin-bottom 15px
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .weight{
        font-weight: 400;
        font-size: 13px;
        color: #666666;
        margin-bottom 11px
      }
      .mb10{
        margin-bottom 10px
      }
    }
  }
  .pro-box:hover{
    border: 1px solid #e1e1e1;
  }
</style>
